<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ include file="header.jsp"%>

<c:url var="getDataDerivacion" value="/derivacion" />
<c:url var="getDataDerivaciones" value="/derivacion/derivaciones" />
<c:url var="getDataDerivacionesAcciones" value="/derivacionaccion" />
<c:url var="getEntidades" value="/derivacion/entidades" />
<c:url value="upload/message" var="messageUploadUrl"/>
<c:url value="upload/file" var="fileUploadUrl"/>
<c:url var="fileDownload" value="download/file"/>

<script>
function cancelaEdicion() {
	var url = "derivacion?idCasosocial="+jQuery('#idCasosocial').val();
	$(location).attr('href',url);
}

jQuery(document).ready(function() {

	$('#idTipoEntidad')
	.change(
			function() {
				$.getJSON('${getEntidades}',{idTipoEntidad : $(this).val(),	ajax : 'true'},
					function(data) {
						var html = '<option value="0">- Seleccione -</option>';
						$('#idEntidad').html(html);
						if (data != null) {
							var len = data.length;
							for ( var i = 0; i < len; i++) {
								html += '<option value="' + data[i].idEntidad + '">'
										+ data[i].descripcion
										+ '</option>';
							}
						}
						$('#idEntidad').html(html);
					});
			});
	
	jQuery("#listaResultados").jqGrid({
		url:'${getDataDerivaciones}?idCasosocial='+jQuery('#idCasosocial').val(),
		datatype: "json",
		height: 250,
		width: 940,
	   	colNames:['id','idCasosocial','Fecha','Entidad/Persona Derivada','Responsable','Acciones','Archivo'],
	   	colModel:[
			{name:'idDerivacion',index:'idDerivacion', sortable : false,hidden : true,key : true},
			{name:'idCasosocial',index:'idCasosocial', sortable : false,hidden : true},
	   		{name:'fechaRegistro',index:'fechaRegistro', width:50, align:'center', sortable : true},
	   		{name:'descripcion',index:'entidad', width:200, align:"left"},
	   		{name:'contacto',index:'responsable', width:200, align:"left"},
	   		{name:'ed',index:'ed',width:100,sortable:true,align:'center'},
	   		{name:'archivo',index:'Archivo',hidden:true}
	   	],
	   	pager: "#paginacion",
	   	caption: "Listado de Derivaciones del Caso Social",
		gridComplete : function() {
			var ids = jQuery("#listaResultados").jqGrid('getDataIDs');
			for ( var i = 0; i < ids.length; i++) {
				var cl = ids[i];
				var ret = jQuery("#listaResultados").jqGrid(
						'getRowData', cl)
				edit = "<a href='${getDataDerivacion}?idCasosocial="+ret.idCasosocial+"&idDerivacion="+ ret.idDerivacion+"'  title='Editar'><img src='resources/images/edita.png'/></a>";
				edit += "&nbsp;&nbsp;<a href='${getDataDerivacionesAcciones}?idDerivacion="+ret.idDerivacion+"'  title='Seguimiento'><img src='resources/images/accion.png'/></a>";
                                if(ret.archivo.length>0 ){
                                    edit += "&nbsp;&nbsp;<a href='${fileDownload}?file="+ret.archivo+"' target='_blank' title='Ver Documento'><img src='resources/images/verdocumento.png'/></a>";
                                }
				jQuery("#listaResultados").jqGrid('setRowData',ids[i], {ed : edit});
			}
		}
	});

    jQuery(function() {
		init();
	});
	
	function init() {
	
		jQuery('#upload').fileupload({
	        dataType: 'json',
	        done: function (e, data) {
	        	jQuery.each(data.result, function (index, file) {
	        		jQuery('#filename').html(formatFileDisplay(file));
	        		jQuery('#archivo').val(file.name);
	            });
	        }
	    });
		
		jQuery('body').data('filelist', new Array());
	}
	
	function formatFileDisplay(file) {
		var size = '<span>'+(file.size/1000).toFixed(2)+'K</span>';
		return file.name + ' ('+ size +')<br/>';
	}
	
	function getFilelist() {
		var files = jQuery('body').data('filelist');
		var filenames = '';
		for (var i=0; i<files.length; i<i++) {
			var suffix = (i==files.length-1) ? '' : ',';
			filenames += files[i].name + suffix;
		}
		return filenames;
	}
	
	function dialog(title, text) {
		jQuery('#msgbox').text(text);
		jQuery('#msgbox').dialog( 
				{	title: title,
					modal: true,
					buttons: {"Ok": function()  {
						jQuery(this).dialog("close");} 
					}
				});
	}
	
	function clearForm() {
		jQuery('#owner').val('');
		jQuery('#description').val('');
		jQuery('#filename').empty();
		jQuery('#attach').empty().append('Add a file');
		jQuery('body').data('filelist', new Array());
	}
	
});
</script>

<%@ include file="resumencaso.jsp"%>

<h2>Derivaciones realizadas</h2>

<form:form modelAttribute="derivacion" method="post">
	<form:hidden path="idDerivacion" />
	<form:hidden path="idCasosocial" />
	<form:hidden path="archivo" />
	<fieldset>
		<div class="f-wrap">
				<div class="f-left">
				<label for="idTipoEntidad">Tipo Entidad:</label><br />
				<form:select path="idTipoEntidad" id="idTipoEntidad" style="width: 150px">
					<form:option value="0">- Seleccione -</form:option>
					<form:options items="${tipoEntidad}" itemValue="idTabla" itemLabel="valor" />
				</form:select>
			</div>
			<div class="f-left">
				<label for="idEntidad">Entidades:</label><br />
				<form:select path="idEntidad" id="idEntidad" style="width: 300px">
					<form:option value="0">- Seleccione -</form:option>
					<form:options items="${entidades}" itemValue="idEntidad" itemLabel="descripcion" />
				</form:select>
			</div>
		</div>
		<div class="f-wrap">
				<label for="otros">Otro:</label><br />
				<form:input path="otros" id="otros" style="width: 350px;"/>
		</div>
		<div class="f-wrap">
			<div class="f-left">
				<label for="archivo">Archivo:</label><br />
				<span id='filename'style="font-weight:bold;"></span><br/>
				<input id="upload" type="file" name="file" data-url="${fileUploadUrl}"/>
			</div>
		</div>
	</fieldset> 
	<div class="f-wrap">            
        <input type='submit' value='Grabar' id='submit' class="button f-right"/>
        <c:if test="${!edita}">
		<input type='reset' value='Limpiar formulario' id='reset' class="button f-right" />	
		</c:if>
		<c:if test="${edita}">
		<input type='reset' value='Cancelar' id='cancel' class="button f-right" onclick="cancelaEdicion();"/>	
		</c:if>	
	</div>
	
	<div id='msgbox' title='' style='display:none'></div>
    <br/>
</form:form>

<table id="listaResultados"></table>
<div id="paginacion" name="paginacion"></div>

<%@ include file="footer.jsp"%>